@page "/call-movie-web-api-auto"
@rendermode InteractiveAuto
@using BlazorApp.Client.Models
@using BlazorApp.Client.Services
@inject IMovieService MovieService

<PageTitle>Call Movie web API (Auto)</PageTitle>

<h1>Call Movie web API Example (Auto)</h1>

@if (Movies == null)
{
    <p>No movies found.</p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th class="text-center">
                    <label>
                        Watched
                        <input type="checkbox" @bind="getWatchedMovies" @bind:after="GetMovies" />
                    </label>
                </th>
                <th>Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr id="editRow" style="display:@editRowStyle">
                <td class="text-center">
                    <input type="checkbox" @bind="editMovie.IsWatched" />
                </td>
                <td>
                    <input @bind="editMovie.Name" />
                </td>
                <td class="text-center">
                    <button class="btn btn-success" @onclick="SaveMovie">
                        Save
                    </button>
                    <button class="btn btn-danger"
                            @onclick="@(() => editRowStyle = "none")">
                        Cancel
                    </button>
                </td>
            </tr>
            @foreach (var movie in Movies)
            {
                <tr>
                    <td class="text-center">
                        @if (movie.IsWatched)
                        {
                            <span>✔</span>
                        }
                    </td>
                    <td>@movie.Name</td>
                    <td class="text-center">
                        <button class="btn btn-warning" @onclick="@(() => EditMovie(movie.Id))">
                            Edit
                        </button>
                        <button class="btn btn-danger" @onclick="@(async () => await DeleteMovie(movie.Id))">
                            Delete
                        </button>
                    </td>
                </tr>
            }
            <tr id="addRow">
                <td></td>
                <td>
                    <input @bind="newMovieName" placeholder="New Movie" />
                </td>
                <td class="text-center">
                    <button class="btn btn-success" @onclick="AddMovie">Add</button>
                </td>
            </tr>
        </tbody>
    </table>
}

@code {
    private Movie editMovie = new();
    private string editRowStyle = "none";
    private string? newMovieName;
    private bool getWatchedMovies;

    [PersistentState]
    public Movie[]? Movies { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Movies ??= await GetMovies();
    }

    private async Task<Movie[]?> GetMovies()
    {
        return await MovieService.GetMoviesAsync(getWatchedMovies) ?? Array.Empty<Movie>();
    }

    private void EditMovie(long id)
    {
        if (Movies is not null)
        {
            editMovie = Movies.Single(i => i.Id == id);
            editRowStyle = "table-row";
        }
    }

    private async Task AddMovie()
    {
        if (!string.IsNullOrEmpty(newMovieName))
        {
            var addMovie = new Movie { Name = newMovieName, IsWatched = false };
            await MovieService.PostMovieAsync(addMovie);
            newMovieName = string.Empty;
            await GetMovies();
            editRowStyle = "none";
        }
    }

    private async Task SaveMovie()
    {
        if (editMovie is not null)
        {
            await MovieService.PutMovieAsync(editMovie.Id, editMovie);
        }
        await GetMovies();
        editRowStyle = "none";
    }

    private async Task DeleteMovie(long id)
    {
        await MovieService.DeleteMovieAsync(id);
        await GetMovies();
        editRowStyle = "none";
    }
}
